<template>
    <div class="app-container app-height">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
                v-for="(item) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
            >
                <component :is="item.content" :ref="item.ref" :form="ruleForm" :doc-id="docId"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import DocDetailMarkdown from "@/views/service/doc/components/DocDetailMarkdown";
import DocDetailManage from "@/views/service/doc/components/DocDetailManage"
import { getApiDetail } from "@/api/dataService/pool"
import { mapGetters } from 'vuex'

export default {
    name: "DocDetail",
    components: {
        DocDetailMarkdown,
        DocDetailManage
    },
    data() {
        return {
            docId: this.$route.query.docId,
            activeName: "1",
            ruleForm: {},
            editableTabs: [{
                title: '基础信息',
                name: '1',
                content: DocDetailMarkdown,
                ref: 'baseinfo'
            }]
        };
    },
    computed: {
        ...mapGetters(['uid', 'roles']),
    },
    created() {
        this.getApiDetail()
    },
    methods: {
        handleClick(value) {
            // value.name == 1 && this.$refs.baseinfo.fetchData();
            // value.name == 2 && this.$refs.manage.fetchData();
        },
        getApiDetail() {
            getApiDetail(this.docId).then(res => {
                if (res.code == 200) {
                    this.ruleForm = res.data
                    console.log("getApiDetail",this.ruleForm)
                    // 管理员和创建者可以见
                    if (this.roles.includes('admin') || this.uid == this.ruleForm.createId) {
                        this.editableTabs.push({
                            title: '管理信息',
                            name: '2',
                            content: DocDetailManage,
                            ref: 'manage'
                        })
                    }
                }
            }).catch(() => {})
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 0 20px 20px;
}
</style>
